<template>
  <div class="title">
    <div>
      <slot v-if="iconShow" name="icon"></slot>
      <span class="circle" v-else></span>
      <span>{{ title }}</span>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
/**
 * 通用标题栏
 * @Prop title 显示内容
 * @slot 插槽，自定义渲染内容
 */
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  name: 'Title'
})
export default class Title extends Vue {
  @Prop() private title
  @Prop({ default: false }) private iconShow
}
</script>

<style lang="stylus" scoped>
.title
  height 32px
  line-height 32px
  font-size 12px
  font-weight 600
  .circle
    display inline-block
    width 6px
    height 6px
    border-radius 50%
    background #008BEE
    margin-right 6px
</style>
